<template>
  <!-- 主应用dom id 不能与子应用dom id 重复  -->
  <div id="fapp">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :router="true"
    >
      <!-- 主应用 -->
      <el-menu-item index="/">主应用</el-menu-item>
      <!-- 子应用 -->
      <el-menu-item
        v-for="item in microAppDom_Router"
        :key="item.name"
        :index="`/${item.name}`"
        >{{ item.menuName }}</el-menu-item
      >

    </el-menu>
    <!-- 主应用路由出口 -->
    <router-view></router-view>
    <!-- 微应用dom容器 -->
    <div
      v-for="item in microAppDom_Router"
      :key="item.name"
      class="microAppBox"
      :id="item.name"
    ></div>
  </div>
</template>
<script>
// 引入子应用路由
import $microAppRouter from "@/utils/microApp/microAppRouter";
export default {
  name: "Home",
  data() {
    return {
      // 默认路由
      activeIndex: "/",
      // 微应用容器及路由list
      microAppDom_Router: $microAppRouter,
    };
  },
  created() {},
};
</script>
